<template>
<div class="container">
	<div class="row justify-content-center">
		<div
			class="alert alert-dismissible fade show col-md-12"
			role="alert"
			:class="notificationLevel"
			@click="hideNotification()"
			v-if="msg"
		>
			{{msg}}
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
	</div>
</div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
	computed: {
		...mapState({
			level: state => state.Notification.level,
			msg: state => state.Notification.msg
		}),
		notificationLevel() {
			return "alert-" + this.level;
		}
	},
	methods: {
		hideNotification(){
      this.$store.commit('hideNotification')
    }
	}
};
</script>

<style lang="scss" scoped>
</style>
